<template>
	<view>	
		<view class="content">
			<image class="logo" src="/static/logo.png"></image>
			<image src="../../static/images/48948085_p0.jpg" mode="heightFix" class="box3"></image>
			<button type="default" @click="choosePicture"> 上传图片</button>
			<image mode="heightFix" class="box3" v-for="img in imgArr" :src="img" @click="touchImg(img)"></view>
			<view v-model="imgArr">文件保存在这里：{{imgArr}}</view>			
			<!-- #ifdef MP-WEIXIN -->
			<view>你正在使用微信小程序阅览本页面</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view>你正在用浏览器阅览本页面</view>
			<!-- #endif -->
			<test v-if="foud" :title="title" @myEvent='getNumber'>这是一个test组件</test>
			<view v-model="num">渲染父组件传来的数据{{num}}</view>
	<!-- 		这里不能使用v-show，因为v-show只是改变了显示模式
			而v-if是销毁后重新渲染，所以v-if能完成这个需求
			而v-show不能，
			但实际应用中v-show比起v-if耗能更少，故推荐使用 -->
			<button @click="fouding">销毁test</button>
			<test-a></test-a>
			<test-b></test-b>
			<uni-calendar
				ref="calendar"
				:insert="false"
				@confirm="confirm"
			 >	</uni-calendar>
			 <button @click="open">打开日历</button>
		</view>
	</view>
</template>

<script>
	import test from '../../compoments/test.vue'
	import testa from '../../compoments/a.vue'
	import testb from '../../compoments/b.vue'
	// 注册组件的过程:创建文件-script里引入-vue模块中注册-html中使用
	export default {
		data() {
			return {
				imgArr:[],
				title: '你好',
				foud:true,
				num:0
			}
		},
		onLoad() {
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			fouding(){
				this.foud = !this.foud
			},
			touchImg(current){
				console.log(current)
				uni.previewImage({
					current,
					urls:this.imgArr,
					loop:true,
					indicator:'number'
				})
			},
			getNumber(num){
				console.log(num)
				this.num = num
			},
			choosePicture(){
				console.log('上传图片')
				uni.chooseImage({
					count:5,
					success:res=> {
						this.imgArr=res.tempFilePaths
					}
				})
			},
			open(){
			    this.$refs.calendar.open();
			},
			confirm(e) {

			    console.log(e,e.fulldate);
				//更改日期时会触发
			}
		},

		components:{
			test, //键和值一样，不用使用test：test
			'test-a':testa,
			'test-b':testb
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.box3{
		width: 750rpx;
		height: 750rpx;
		font-size: 30rpx;
	}
</style>
